<template>
	<div>
		<el-form   :label-position="labelPosition"
		    label-width="120px"
		    class="demo-ruleForm ">
			<el-row class="container">
				<el-page-header @back="goback" content="">
				</el-page-header>
				<!-- <el-col style="margin-top: 20px;">
					<el-button>防疫</el-button>
					
				</el-col> -->
				<el-col :span="12" style="margin-top:20px;">
					<el-form-item label="养殖批号：">
					     {{ruleForm.batch}}
					</el-form-item>
					<el-form-item label="防疫数量：">
					    {{ruleForm.prevent}}
					</el-form-item>
				</el-col>
				<el-col :span="10" style="margin-top:20px;">
					<el-form-item label="数量：">
					    {{ruleForm.breedNumber}}
					</el-form-item>
				
				</el-col>
			</el-row>
			<el-row class="container" style="margin-top:20px;">
				<h3>防疫明细</h3>
				<el-col :span="7" style="margin-top:20px;">
				    <el-input placeholder="编号/投入药品/防疫批号/防疫负责人" v-model="searchName" style="width:300px;">
				        <i slot="prefix" class="el-input__icon el-icon-search"></i>
				        <el-button slot="append" @click="handleSearch">搜索</el-button>
				    </el-input>
				</el-col>
				<el-col>
					<el-table
						:data="tableData"
						border
						style="margin-top:20px;"
						ref="multipleTable"
						header-cell-class-name="table-header">
						<el-table-column prop="type" sortable label="编号类型"></el-table-column>
						<el-table-column prop="code" sortable label="编号"></el-table-column>
						<el-table-column prop="inputsName" sortable label="投入药品"></el-table-column>
						<el-table-column prop="preventBatch" sortable label="防疫批号"></el-table-column>
						<el-table-column prop="preventTime" sortable label="防疫日期"></el-table-column>
						<el-table-column prop="preventName" sortable label="防疫负责人"></el-table-column>
						<!-- <el-table-column label="操作" width="150" align="center">
							<template slot-scope="scope"><el-button
									type="text"
									style="color: red;"
									@click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column> -->
					</el-table>
					<el-pagination
						layout="total, prev, pager, next, jumper"
						:page-size="pagesize"
						:current-page.sync="currentPage"
						:total="total"
						@current-change="handleCurrentChange"
						style="margin-top:20px"
					></el-pagination>
				</el-col>
			</el-row>
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button @click="goback">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { prevent_findById,prevent_findByList,prevent_delete } from '@/request/breedApi';
	export default{
		data(){
			return{
				labelPosition:'right',
				tableData:[],
	            ruleForm:{},
				currentPage:1,
				total:0,
				pagesize:10,
				searchName:'',
			
			}
		},
		mounted() {
			this.init();
		},
		methods:{
            // 页面一进来加载
            init() {
                 const _this = this;
                 this.id = _this.$route.query.id
                 prevent_findById(this.id).then((res) => {
                   if (res.code == 200) {
                      this.ruleForm = res.data;
                  }
                 });
               var params = {
                  query: this.searchName,
                  page: this.currentPage,
                  breedId:this.id
               };
              prevent_findByList(params).then((res) => {
                if (res.code == 200) {
                     this.tableData = res.rows;
                     this.total = res.total;
                 }
              });
            },
			goback(){
				this.$router.go(-1)
			},
			handleDelete(index,row){
              prevent_delete(row.id).then((res) => {
                  if (res.code == 200) {
                        this.init();
                   }
                });
			},
	
			handleCurrentChange(val) {
			    this.currentPage = val;
			    
			},
			
			handleSearch(){
                this.currentPage = 1;
                this.init();
			},
		
		}
	}
</script>

<style scoped>
	.el-pagination {
	    text-align: center;
	}
</style>

